<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/echarts/5.3.1/echarts.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
    <title>未来一周的天气的折线图</title>
</head>

<body>
    <div id="main" style="width: 100%;height: 800px;">
        <script>
            window.onload = function Pie() {
                var MyEchart = echarts.init(document.getElementById('main'));
                MyEchart.showLoading({ text: "正在加载" });
                option = {
                    title: {
                        text: '未来一周的天气变化情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name: '最高温',
                            type: 'line',
                            data: [10, 11, 13, 11, 12, 12, 9],
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                        {
                            name: '最低温',
                            type: 'line',
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markPoint: {
                                data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: 'Avg' },
                                    [
                                        {
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: 'Max'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                };
                MyEchart.hideLoading();
                MyEchart.setOption(option);
            }
        </script>
    </div>
</body>

</html>